<template>
  <div class="cart">
    <div v-if="cart.length === 0">购物车是空的请去
      <span
       class="toshopping"
       is="router-link"
       to="/shoplist"
       tag="span"
      >添加商品</span>
      </div>
     <van-swipe-cell
      v-else
      v-for="item in cart"
      :key="item.id"
     >
        <van-card
          class="goods-card"
          :num="item.count"
          :price="item.price"
          :title="item.title"
        >
        <template #thumb>
          <van-checkbox :value="true" />
          <van-image :src="item.image" />
        </template>
        <template #num>
          <van-stepper theme="round" button-size="22" disable-input />
        </template>
        </van-card>
        <template #right>
          <van-button
            square text="删除"
            type="danger"
            class="delete-button"
            @click="deleteItem(item.id)"
          />
        </template>
      </van-swipe-cell>
      <van-submit-bar :price="3050" button-text="提交订单" >
      <van-checkbox :value="true">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapActions } from 'vuex'
import { SwipeCell, Card, Button, Stepper, SubmitBar, Checkbox, Image } from 'vant'

Vue.use(SwipeCell)
Vue.use(Card)
Vue.use(Button)
Vue.use(Stepper)
Vue.use(SubmitBar)
Vue.use(Checkbox)
Vue.use(Image)

export default {
  name: 'Cart',
  computed: {
    cart () {
      return this.$store.state.cartModule.cart
    }
  },
  methods: {
    ...mapActions(['removeItem']),
    deleteItem (id) {
      this.removeItem(id)
    }
  }
}
</script>

<style lang="scss" scoped>
    .toshopping {
      color: red;
    }
    .delete-button {
      height: 100%;
    }
</style>
